{extend name="$_admin_base_layout" /}
{block name="plugins-css"}
<link href="__LIBS__/jquery-treetable/css/jquery.treetable.css" rel="stylesheet" type="text/css" />
<link href="__LIBS__/jquery-treetable/css/jquery.treetable.theme.default.css" rel="stylesheet" type="text/css" />
{/block}

{block name="content"}

<form action="" method="get">
    <div class="toolbar-btn-action">
        <div class="form-inline time-filter">
            <div class="time-filter">
                <div class="input-daterange input-group" data-date-format="yyyy">
                    <input class="form-control" type="text" id="_filter_time_to" name="_filter_time_to" value="" placeholder="点击选择年份">
                </div>
                <input type="hidden" id="_filter_time" name="_filter_time">
                <button type="button" id="btn-filter-time" class="btn btn-default">搜索</button>
            </div>
        </div>
    </div>
</form>
<script type="text/javascript" src="__STATIC__/tongji/js/highcharts.js"></script>
<script type="text/javascript" src="__STATIC__/tongji/jsm/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<script type="text/javascript">

    Highcharts.chart('container', {
        chart: {
            type: 'area'
        },
        title: {
            text: '{$title}'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [
                {$xAxis}
            ]
        },
        yAxis: {
            min: 0,
            max:2000,
            title: {
                text: '订单数(个)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}月</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y}个</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: '年订单数量（个）',
            data: [{$member}]
        }]
    });
</script>
{/block}
{block name="script"}
<script src="__LIBS__/jquery-treetable/jquery.treetable.js"></script>
<script>
    $(document).ready(function(){
        // 初始化折叠树
        $('#group_auth').treetable({
            expandable: true,
            initialState: "expanded"
        });

        // 展开所有菜单
        $('#expand-all').click(function(){
            $('#group_auth').treetable('expandAll');
        });

        // 折叠所有菜单
        $('#collapse-all').click(function(){
            $('#group_auth').treetable('collapseAll');
        });

        // 全选
        $('#check-all').click(function () {
            $('input[name="group_auth[]"]').prop('checked', true);
        });

        // 反选
        $('#check-inverse').click(function () {
            $('input[name="group_auth[]"]').each(function () {
                $(this).prop('checked', !this.checked);
            });
        });

        // 选择中或取消选择后代
        $('input[name="group_auth[]"]').click(function () {
            var tr  = $(this).closest('tr');
            var id  = tr.data('tt-id');
            var pid = tr.data('tt-parent-id');

            if (this.checked) {
                // 选中所有父辈节点
//                check_parent(pid);
            }
            check_it(id, this.checked);
        });

        /**
         * 选中/取消所有子孙节点
         * @param  int id 菜单自身id
         * @param  string status 选中状态
         * @return void
         */
        var check_it = function(id, status){
            var child = $('#group_auth tr[data-tt-parent-id='+id+']');
            child.find('input:checkbox').prop('checked', status);
            child.each(function() {
                check_it($(this).data('tt-id'), status);
            });
        };

        /**
         * 选中所有父辈节点
         * @param  int id 菜单父级id
         * @param  string status 选中状态
         * @return void
         */
        var check_parent = function(id){
            var self = $('#group_auth tr[data-tt-id='+id+']');
            var pid = self.data('tt-parent-id');

            self.find('input:checkbox').prop('checked', true);
            if (pid == undefined) {
                return;
            }
            check_parent(pid);
        };
    });
</script>
<!--海豚日期插件开始-->
<script src="/public/static/libs/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/public/static/libs/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script>
    jQuery(function () {
        App.initHelpers(['appear', 'slimscroll', 'magnific-popup', 'table-tools']);
        App.initHelpers(["datepicker"]);
    });
</script>
<!--海豚日期插件结束-->
{/block}